<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梅赛德斯-奔驰</title>
    <link rel="stylesheet" href="./js/fullpage.min.css">
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/fullpage.js"></script>
    <link rel="stylesheet" href="./css/c.css">
    <script src="./js/lunbofengzhuang.js"></script>
    <script src="./js/cartoon.js"></script>
    <script src="./js/qichelunbo.js"></script>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <script>
        $(function () {
            $('#dowebok').fullpage({
                sectionsColor: ['#1bbc9b', 'black', '#7BAABE', '#f90'],
                'navigation': true,
            });
            var flunbo = document.querySelector('.first ul')
            var left = document.querySelector('.left1')
            var right = document.querySelector('.right1')
            var circle = document.querySelector('.circle')
            var section = document.querySelectorAll('.section')
            lbhs(circle, flunbo, left, right, section[0], section[0].offsetWidth)

            left.addEventListener('selectstart', function (e) {
                e.preventDefault()
            })
            right.addEventListener('selectstart', function (e) {
                e.preventDefault()
            })
            section[0].addEventListener('mouseover', function () {
                left.style.display = 'block'
                right.style.display = 'block'

            })
            section[0].addEventListener('mouseout', function () {
                left.style.display = 'none'
                right.style.display = 'none'

            })
            var anniu = document.querySelectorAll('.anniu')
            for (let i = 0; i < anniu.length; i++) {
                anniu[i].addEventListener('mouseover', function () {
                    this.style.backgroundColor = 'rgba(255,255,255,0.2)'
                })
                anniu[i].addEventListener('mouseout', function () {
                    this.style.backgroundColor = ''
                })
            }
            var secondUl = document.querySelector('.second ul')
            var secondOl = document.querySelector('.second ol')
            var second = document.querySelector('.second')
            var secondWidth = second.offsetWidth
            var shuxian = document.querySelector('.shuxian')
            carlbhs(secondOl, secondUl, second, section[0].offsetWidth, shuxian)
            function mouserpass1(xx) {
                $(xx).hover(function () {
                    $(this).css('background', '#333333')
                }, function () {
                    $(this).css('background', '')
                })
            }
            mouserpass1(".pbutton")
            mouserpass1(".explore")
            $('.light').hover(function () {
                $(this).css('background', 'rgba(255,255,255,0.8)')
            }, function () {
                $(this).css('background', '')
            })
            var nl = document.querySelector('.nl')
            var nr = document.querySelector('.nr')
            function mouserpass2(xx) {
                $(xx).hover(function () {
                    $(this).css('color', '#0087EF')
                }, function () {
                    $(this).css('color', '#fff')
                })
            }
            mouserpass2(nl)
            $(nr).hover(function () {
                    $('.denglu').css('color', '#0087EF')
                }, function () {
                    $('.denglu').css('color', '#fff')
                })
            var fp_nav = document.querySelector('#fp_nav')

            document.addEventListener('scroll', function () {
                console.log();
                console.log(1);
            })

            $(section[2]).hover(function () {
                $('.ship1').stop().fadeIn(1000)
            }, function () {

            })
            $(section[3]).hover(function () {
                $('.content4').stop().fadeIn(1000)
            }, function () {

            })
            $(section[4]).hover(function () {
                $('.content5').stop().fadeIn(1000)
            }, function () {

            })
            var box1 = document.querySelector('.box1')
            var box2 = document.querySelector('.box2')
            var box3 = document.querySelector('.box3')
            function boxPass(a) {
                $(a).hover(function () {
                 
                    $(this).stop().animate({
                        left: -140 + 'px'
                    }, 300, 'linear')
                }, function () {
                    $(this).stop().animate({
                        left: 0 + 'px'
                    }, 300, 'linear')
                })
            }
            boxPass(box1)
            boxPass(box2)
            boxPass(box3)
           var timer1
           var timer2
           var timer3
           var timer4
           var timer5
           var timer6
           var d=[timer1,timer2,timer3,timer4,timer5,timer6]
            var navcenter = document.querySelectorAll('.navcenter ul li')
            var slideMenu=document.querySelectorAll('.slideMenu')
            $(navcenter).hover(function () {
                var index = $(this).index()
                $('.slideMenu').each(function(index){
                    $('.slideMenu').eq(index).stop().fadeOut(0)
                })
               // clearTimeout(d[index])
                 $('.slideMenu').eq(index).stop().fadeIn(0).css('z-index',10)
            },function () { 
                let index = $(this).index()
               // clearTimeout(d[index])
                $('.slideMenu').eq(index).css('z-index',1)
              /*  d[index]=setTimeout(function(){
                    $('.slideMenu').eq(index).stop().fadeOut(0)
                }, 1000); */

              $('.slideMenu').eq(index).stop().fadeOut(1000)
        
            })
            $('.slideContent div').hover(function(){
                $(this).css('color','#00ADEF')
            },function(){
                $(this).css('color','#D8D8D8')
            })
          $('.navcenter ul li ').hover(function(){
             
              $(this).removeClass('liCartoon2').addClass('liCartoon1')
          },function(){
            $(this).removeClass('liCartoon1').addClass('liCartoon2')
          })
            
        });
    </script>
    <style>
        .section {
            text-align: center;
            font: 50px "Microsoft Yahei";
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="navContent">
            <a href="">
                <div class="navleft"></div>
            </a>
            <div class="navcenter">
                <ul>
                    <li>奔驰制造
                        <div class="slideMenu">
                            <div class="slideContent">
                                <div class="sc1">轿车</div>
                                <div class="sc2">SUV</div>
                                <div class="sc3">轿跑车</div>
                                <div class="sc4">MPV</div>
                                <div class="sc5">纯电动</div>
                            </div>
                            
                        </div>
                    </li>
                    <li>品牌天地<div class="slideMenu">
                        <div class="slideContent">
                            <div class="sc1">N系列</div>
                            <div class="sc2">X系列</div>
                            <div class="sc3">Y系列</div>
                            
                        </div>
                        </div>
                    </li>
                    <li>品牌互动
                        <div class="slideMenu">
                            <div class="slideContent">
                                <div class="sc1">无处不从容</div>
                                <div class="sc2">掀新生浪潮</div>
                                <div class="sc3">梅赛德斯杯</div>      
                                <div class="sc5">奔驰SUV之旅</div>
                            </div>
                        </div>
                    </li>
                    <li>设计美学<div class="slideMenu">
                            <div class="slideContent">
                                <div class="sc1">艺术之声</div>
                                
                                <div class="sc4">艺术之身</div>
                                <div class="sc5">艺术之尾</div>
                            </div>
                        </div>
                    </li>
                    <li>买互联<div class="slideMenu">
                            <div class="slideContent">
                                <div class="sc1">互联之家</div>
                                <div class="sc2">关于互联</div>
                                <div class="sc3">咨询了解</div>
                               
                            </div>
                        </div>
                    </li>
                    <li>看二手<div class="slideMenu">
                            <div class="slideContent">
                                <div class="sc1">一站式置换</div>
                                <div class="sc2">认证二手车</div>
                                <div class="sc3">认证服务</div>
                                <div class="sc4">经销商</div>
                                <div class="sc5">二手车展示</div>
                            </div>
                        </div>
                    </li>
                    <li>客户承诺<div class="slideMenu">
                            <div class="slideContent">
                                <div class="sc1">责任声明</div>
                                <div class="sc2">客户保障</div>
                              
                                <div class="sc4">售后服务</div>
                                <div class="sc5">关于</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="navright">
                <div class="nl"></div>
                <div class="nr"><a href="./register.html" class="denglu" target="_blank">登录</a></div>
            </div>
        </div>

    </div>
    <div class="fixBox">
        <div class="box1"><span></span>在线客服</div>
        <div class="box2"><span></span>预约试驾</div>
        <div class="box3"><span></span>信息填写</div>
    </div>
    <div id="dowebok">
        <div class="section first">

            <ul>
                <li>
                    <img src="images/首轮播/f.jpg" alt="">
                    <div class="add1">
                        <img src="./images/首轮播/f1.svg" alt="">
                        <a href="" class="anniu">了解更多</a>
                    </div>
                </li>
                <li>
                    <img src="images/首轮播/d.jpg" alt="">
                    <div class="add2">
                        <img src="./images/首轮播/d1.svg" alt="">
                        <a href="" class="anniu">了解更多</a>
                    </div>
                </li>
                <li>
                    <img src="images/首轮播/a.jpg" alt="">
                    <div class="add3"><img src="./images/首轮播/a1.svg" alt="">
                        <a href="" class="anniu">了解更多</a>
                    </div>
                </li>
                <li>
                    <img src="images/首轮播/c.jpg" alt="">
                    <div class="add4"><img src="./images/首轮播/c1.svg" alt="">
                        <a href="" class="anniu">了解更多</a>
                    </div>
                </li>
                <li>
                    <img src="images/首轮播/b.jpg" alt="">
                    <div class="add5"><img src="./images/首轮播/b1.svg" alt="">
                        <a href="" class="anniu">了解更多</a>
                    </div>
                </li>
                <li>
                    <img src="images/首轮播/e.png" alt="">
                    <div class="add6"><img src="./images/首轮播/e1.svg" alt="">
                        <a href="" class="anniu">了解更多</a>
                    </div>
                </li>
            </ul>
            <span class="left1"></span>
            <span class="right1"></span>
            <ol class="circle">
            </ol>

        </div>
        <div class="section second">
            <img src="./images/汽轮播/carlun2.gif" alt="" class="c2">
            <img src="./images/汽轮播/carlun1.png" alt="" class="c1">
            <ul>
                <li><img src="./images/汽轮播/car1.png" alt=""></li>
                <li><img src="./images/汽轮播/car2.png" alt=""></li>
                <li><img src="./images/汽轮播/car3.png" alt=""></li>
                <li><img src="./images/汽轮播/car4.png" alt=""></li>
                <li><img src="./images/汽轮播/car5.png" alt=""></li>
                <li><img src="./images/汽轮播/car6.png" alt=""></li>
            </ul>
            <ol>
                <li index='0'>
                    轿车</li>
                <li index='1'>SUV</li>
                <li index='2'>轿跑车&敞篷跑车</li>
                <li index='3'>MPV</li>
                <li index='4'>纯电动车</li>
                <li index='5'>插电式混合动力</li>
            </ol>
            <div class="shuxian">
                <div id="ss1"></div>
                <div id="ss2"></div>
                <div id="ss3"></div>
                <div id="ss4"></div>
                <div id="ss5"></div>
                <div id="ss6"></div>
            </div>
            <a href="" class="explore">点击探索</a>
        </div>

        <div class="section">
            <span class="ship1">
                <img src="./video/视频1.svg" alt=""><br>
                <a href="#" class="pbutton">了解更多</a>
            </span>
            <video src="./video/service_m.mp4" class="service_m" data-keepplaying autoplay muted loop="loop"></video>
        </div>
        <div class="section  section4">
            <div class="content content4">
                <img src="./images/zuoyi.svg" alt="">
                <span class="pbutton">了解详情</span>
            </div>
        </div>
        <div class="section five">
            <div class="content content5">
                <img src="./video/视频2.svg" alt="">
                <span class="pbutton light">查找经销商</span>
                <span class="pbutton deep">预约试驾</span>
            </div>
            <video src="./video/testdriver.mp4" class="service_m" muted autoplay loop="loop" data-keepplaying></video>
        </div>
        <div class="section fp-auto-height footer">
            <div class="last-footer">
                <div class="footerl">
                    <div class="fttop">
                        <ul>
                            <li>
                                <a href=""><span>隐私条款</span></a>
                            </li>
                            <li>
                                <a href=""><span>客户关怀热线</span></a>
                            </li>
                            <li>
                                <a href=""><span>网站地图</span></a>
                            </li>
                            <li>
                                <a href=""><span>法律声明</span></a>
                            </li>
                            <li>
                                <a href=""><span>环保信息查询</span></a>
                            </li>
                            <li>
                                <a href=""><span>供应商平台</span></a>
                            </li>
                            <li>
                                <a href=""><span>腾势官网</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="ftbottom">
                        <ul>
                            <li>
                                <a href=""><span>©梅赛德斯-奔驰版权所有</span></a>
                            </li>
                            <li>
                                <a href=""><span>京ICP备09046804号-2</span></a>
                            </li>
                            <li>
                                <a href=""><span>京公网安备 11010502035702号</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="footerr">
                    <ul>
                        <li><img src="./images/奔驰.png" alt="">官方在线展厅</li>
                        <li><img src="./images/微信.png" alt="">官方微信</li>
                        <li><img src="./images/天猫.png" alt="">天猫官方旗舰店</li>
                        <li><img src="./images/微博.png" alt="">官方微博</li>
                        <li><img src="./images/抖音.png" alt="">官方抖音</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


</body>

</html>